<style lang="less" scoped>
  .dib{
    display: inline-block;
  }

  .layout{
    height:100%;
    ul{
      height:100%;
      li{
        height:50%;
        display: flex;
        input[type="radio"]{
              align-self: center;
        }
      }
    }
    &-1{
      width:100%;
    }
    &-2{
      width:100%;
    }
  }
</style>

<template>

  <div class="layout">
    <ul>
      <li>
        <input type="radio" value="1" name="layout" style="width:20%" checked="checked"/>
        <div class="layout-1">
          <div style="height:30%;background-color:gray;margin-bottom:5%;" class="top-1"></div>
          <div style="display:inline-block;background-color:gray;width:30%;height:60%" class="left-1">
          </div><div style="display:inline-block;background-color:gray;width:65%;height:60%;margin-left:5%" class="right-1"></div>
        </div>
      </li>
      <li>
        <input type="radio" value="2" name="layout" style="width:20%"/>
        <div class="layout-2">
          <div style="height:20%;background-color:gray;margin-bottom:5%;" class="top-2"></div>
          <div style="display:inline-block;background-color:gray;width:30%;height:60%" class="left-2">
          </div><div style="display:inline-block;background-color:gray;width:65%;height:60%;margin-left:5%" class="right-2">
          </div><div style="background-color:gray;height:12%" class="bottom-2"></div>
        </div>
      </li>
    </ul>
  </div>

</template>

<script>

export default {
  name: 'layout'
  
}
</script>